<template>
  <div class="revset">
    <a-layout>
      <PageHeader @back="$router.go(-1)" subTitle="返回">
        添加补差
      </PageHeader>
      <div style="background-color:#FAFAFA;margin-bottom:24px;padding-top:20px">
        <a-row>
          <a-col :span="7" :offset="3">
            <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="补差开始时间" required>
                <a-month-picker
                  placeholder="请选择"
                  style="margin-left: 10px;width: 150px"
                  @change="handleProgTime"
                  :disabled-date="disabledDate"
                />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="7" :offset="3">
            <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="补差结束时间" required>
                <a-month-picker
                  placeholder="请选择"
                  style="margin-left: 10px;width: 150px"
                  @change="handleProgTime2"
                  :disabled-date="disabledDate2"
                />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="7" :offset="3">
            <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="补差参保方案">
                <a-input style="margin-left: 10px;width: 150px" :disabled="true" v-model="progName" placeholder="请填写方案名称" />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>

      <shebao-table
        v-if="onlyAmount === 0"
        :prog-id="progId"
        :prog-name="progName"
        :soc-city-name="socCityName"
        :soc-city="socCity"
        :deductionsDate="deductionsDate"
        :endDt="endDt"
        :startDt="startDt"
      />
      <only-amount-table
        v-if="onlyAmount === 1"
        :prog-id="progId"
        :prog-name="progName"
        :soc-city-name="socCityName"
        :soc-city="socCity"
        :deductionsDate="deductionsDate"
        :endDt="endDt"
        :startDt="startDt"
      />
    </a-layout>
  </div>
</template>

<script>
import { findSocProgRelation } from "@/api/shebao/shebaoMethod.js";
import shebaoTable from "./shebaoTable2";
import onlyAmountTable from "./onlyAmountTable2";
import { isContainByString } from "@/utils/index";
import moment from "moment";
export default {
  components: {
    shebaoTable,
    onlyAmountTable
  },
  data() {
    return {
      isContainByString,
      progId: "",
      progName: "",
      deductionsDate: 1,
      onlySocAmount: false,
      socCityName: "",
      socCity: "",
      onlyAmount: 0,
      startDt: 0,
      endDt: 0
    };
  },

  created() {
    if (this.$route.query.id) {
      this.progId = this.$route.query.id;
      // this.empSocInfoId = this.$route.query.empSocInfoId;
      this.toInquire();
    }
  },
  methods: {
    disabledDate(current) {
      if (this.endDt !== 0) {
        return current && moment(moment(this.endDt).format("YYYY-MM")).isBefore(moment(moment(current).format("YYYY-MM")));
      }
      return false;
    },
    disabledDate2(current) {
      if (this.startDt !== 0) {
        return current && moment(moment(current).format("YYYY-MM")).isBefore(moment(moment(this.startDt).format("YYYY-MM")));
      }
      return false;
    },
    handleProgTime(date, dateString) {
      if (date !== null) {
        this.startDt = Number(date);
      } else {
        this.startDt = 0;
      }
    },
    handleProgTime2(date, dateString) {
      if (date !== null) {
        this.endDt = Number(date);
      } else {
        this.endDt = 0;
      }
    },
    // 处理城市
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    // 查询方案详情
    toInquire() {
      findSocProgRelation({
        progId: this.progId,
        companyId: this.isContainByString("contractAdmin") ? "0" : this.$store.state.hr.companyId
      }).then(res => {
        this.progName = res.data.progName;
        this.socCityName = res.data.socCityName;
        this.socCity = res.data.socCity.toString();
        this.onlySocAmount = res.data.onlySocAmount;
        this.onlyAmount = Number(res.data.onlySocAmount);
        this.deductionsDate = res.data.deductionsDate;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
}
.left2 {
  display: flex;
  flex-direction: row;
}
.headback {
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-title {
  display: flex;
  height: 30px;
  padding-top: 3px;
  padding-top: 5px;
  margin-top: 24px;
  margin-bottom: 24px;
  // background: #fa2855;
  .title-info {
    font-size: 16px;
    color: #252525;
    width: 200px;
    height: 22px;
    margin-right: 10px;

    padding-left: 15px;
  }
  .title-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;
    background-color: var(--primary);
  }
}
.header-title-box {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.totalBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-top: 30px;

  .company {
    margin-right: 24px;
  }
  .shebaoTotal {
    margin-right: 24px;
  }
  .text {
    font-size: 14px;
  }
  .number {
    color: var(--primary);
    font-size: 14px;
  }
}
.submit-btn {
  display: flex;
  justify-content: center;
  button {
    margin-right: 10px;
  }
}

.addCursor {
  cursor: pointer;
}

.checkboxWrapper {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  width: 150px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  padding: 10px 0 10px 10px;
}
</style>
